import { Button, Space  } from 'antd';
import moment from 'moment';
import React, { useContext, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { UserContext } from '@/layouts/UserProvider';
import { ScheduleContext } from '../SchContext';


const SchList = ({ onEventClick, onCheck, onSelect,handleDelTest  }) => {
  const actionRef = useRef();
  const ctx = useContext(ScheduleContext);
  const userCtx = useContext(UserContext)
  const userInfo = userCtx.userInfo;
  const statusMap = { 1: '待审核', 2: '已确认', 3: '已取消' };
  if (actionRef.current) {
    actionRef.current.reload();
  }
  const columns = [
    {
      title: 'ID',
      ellipsis: true,
      search: false,
      align: 'center',
      dataIndex: 'car_appointment_id',
      key: 'car_appointment_id',
    },
    {
      title: '预约人',
      ellipsis: true,
      search: false,
      align: 'center',
      dataIndex: 'creatorName',
      key: 'creatorName',
    },
    {
      title: '车辆',
      ellipsis: true,
      search: false,
      align: 'center',
      dataIndex: 'card',
      key: 'card',
    },
    {
      title: '任务标签',
      ellipsis: true,
      search: false,
      align: 'center',
      key: 'taskTagName',
      dataIndex: 'taskTagName',
    },
    {
      title: '预约时间',
      align: 'center',
      search: false,
      key: 'time',
      ellipsis: true,
      width: 300,
      render: (text, { start_time, end_time }) => `${start_time || '__'}-${end_time || '__'}`,
    },
    {
      title: '状态',
      key: 'status',
      search: false,
      dataIndex: 'status',
      render: (status) => statusMap[status] || '未知',
    },
    {
      title: '操作',
      key: 'action',
      search: false,
      width: 300,
      align: 'center',
      render: (text, record) => (
        <div style={{ textAlign: 'left' }}>
          <Space size="small">
            {userCtx.userPermits.includes('detailTask') && <Button size="small" onClick={() => onEventClick(record)}>
              查看
            </Button>}
            {userCtx.userPermits.includes('updateTask') && (userInfo.user_id == record.creator_id || ['1', '4'].includes(String(userInfo?.type))) && <Button size="small" onClick={() => onSelect({ ...record, id: record.car_appointment_id, dateTime: [moment(record.start_time), moment(record.end_time)] }, 'update')}>
              修改
            </Button>}
            {userCtx.userPermits.includes('deleteTask') && (userInfo.user_id == record.creator_id || ['1', '4'].includes(String(userInfo?.type))) && <Button size="small"  onClick={() => handleDelTest({ ...record, id:  record.car_appointment_id,},'update')}>
              删除
            </Button>}
            {+record.status === 1 && userCtx.userPermits.includes('verifyTask') && ['1', '4'].includes(String(userCtx.userInfo?.type)) && (
              <>
                <Button
                  size="small"
                  onClick={() => onCheck({ record, id: record.car_appointment_id, status: 2 })}
                >
                  批准 
                </Button>
                <Button
                  size="small"
                  onClick={() => onCheck({ record, id: record.car_appointment_id, status: 3 })}
                >
                  驳回
                </Button>
              </>
            )}
          </Space>
        </div>
      ),
    },
  ];

  return (
    <>
      <ProTable
        actionRef={actionRef}
        id="car_appointment_id"
        rowKey='car_appointment_id'
        style={{ margin: '20px 0' }}
        request={async (params, sorter, filter) =>{
            let res = ctx;
            res.total = res.resources.length;
            return {data: res.resources || [], success: true, total: res.total || 0}
          }
        }
        expandable={{

          expandedRowRender: record => <p style={{ margin: 0 ,paddingLeft:100}}>任务内容：{record.content}</p>,
          // rowExpandable: record => record.title !== 'Not Expandable',
        }}
        options={false}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          hideOnSinglePage: false,
          showTotal: (total) => `共有 ${total} 条记录`,
          pageSize:10,
        }}
        toolBarRender={false}
        search={false}
      />
    </>
  );
};

export default SchList;